<template>
    <div class="page-container page-customerManage">
        <div class="company-manager">
            <div class="operations">
                <div class="search-user">
                    <el-input v-model="searchForm.key" class="search-input" placeholder="用户名/企业名称" style="width: 300px;"></el-input>
                    <div class="search-btn" @click="clickSearch">查询</div>
                </div>
            </div>
            <el-table :data="operationList" border tooltip-effect="dark" style="width: 100%;">
                <el-table-column prop="name" align="center" label="登录用户名" width="160">
                </el-table-column>
                <el-table-column align="center" prop="companyName" label="企业名称" width="240">
                </el-table-column>
                <el-table-column align="center" label="操作名称" width="160">
                    <template slot-scope="scope">
                        <div>{{ scope.row.operationId == 1 ? "购买服务" : scope.row.operationId == 2 ? "设置代理商" : '' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="content" align="center" label="操作内容">
                </el-table-column>
                <el-table-column label="操作时间" align="center" width="160">
                    <template slot-scope="scope">
                        <div>{{ scope.row.createTime | formatDateMin }}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                    :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { selectAdminRecordListApi } from "@/api/api.js"
export default {
    data() {
        return {
            searchForm: {
                key: ''
            },
            pageNum: 1,
            total: 0,
            operationList: []
        }
    },
    created() {
        this.search();
    },
    methods: {
        search() {
            let params = {
                name: this.searchForm.key,
                pageNum: this.pageNum
            }
            console.log(params)
            selectAdminRecordListApi(params).then(res => {
                if (res.code == 200) {
                    this.operationList = res.data.pageInfo.list;
                    this.total = res.data.pageInfo.total;
                } else {
                    this.operationList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.operationList = [];
            })
        },
        clickSearch() {
            this.pageNum = 1;
            this.search();
        },
        handleCurrentChange() {
            this.search();
        }
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .page {
        padding: 10px 0;
        text-align: center;
    }
    .company-manager {
        padding: 0 20px;
        .operations {
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            .operation-btns {
                display: flex;
                div {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
            .search-user {
                display: flex;
                .search-input {
                    height: 40px;
                    margin-right: 10px;
                    .el-input__inner {
                        height: 40px;
                    }
                }
                .search-btn {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
        }
    }
}
</style>